<template>
  <div class="pic-uploader-wrapper">
    <el-upload class="pic-uploader"
      :show-file-list="false"
      :http-request="sendChange"
      action="">
      <img v-if="oldPath"
        :src="oldPath"
        width="88">
      <img src="@/public/image/add.png"
        v-else
        width="66">
    </el-upload>
    <p class="info">图片建议尺寸700*220像素，JPG、PNG图片格式，1M以内</p>
  </div>
</template>
<script>
import { upimg } from "@/public/js/setting";
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      oldPath: this.value
    };
  },
  watch: {
    value(oldPath) {
      this.oldPath = oldPath;
    }
  },
  computed: {},
  methods: {
    sendChange(e) {
      //判断文件格式
      let { type } = e.file;
      if (type !== "image/jpeg" && type !== "image/png") {
        this.$message.error("请选择JPG、PNG格式的图片！");
        return false;
      }
      var reader = new FileReader();
      reader.readAsDataURL(e.file);
      reader.onload = e => {
        let photoPath = e.target.result;
        upimg({
          nowPath: photoPath,
          oldPath: this.oldPath
        }).then(res => {
          this.oldPath = res.data.path;
          this.$emit("input", this.oldPath);
        });
      };
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.pic-uploader-wrapper {
  display: flex;
  align-items: center;
}
.info {
  padding-left: 20px;
}
</style>